<template>
  <div class="list">
    <ul id="nav">
      <li>
        <router-link to="/" class="flex">
          <div>
            <span class="iconfont icon-shouye"></span>
            <span>首页</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/item" class="flex">
          <div>
            <span class="iconfont icon-leimupinleifenleileibie"></span>
            <span>分类</span>
          </div>
        </router-link>
      </li>

      <li>
        <router-link to="/exercise" class="flex">
          <div>
            <span class="iconfont icon-huodong big"></span>
            <span>活动</span>
          </div>
        </router-link>
      </li>

      <li>
        <router-link to="/shop" class="flex">
          <div>
            <span class="iconfont cart_empty icon-icon-test"></span>
            <span>购物车</span>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/mine" class="flex">
          <div>
            <span class="iconfont icon-icon-test12"></span>
            <span>我的</span>
          </div>
        </router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "list"
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.list {
  a {
    text-decoration: none;
    color: black;
  }
  .router-link-active {
    color: orangered;
  }
  #nav {
    display: flex;
    width: 100%;
    height: 1.333333rem;
    background: whitesmoke;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
  }
  li {
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    .flex {
      display: flex;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-size: 0.4rem;
        }
        .iconfont {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
